// 详情页
<template>
    <div class="cateory-box">
        <div class="container">
            <div class="top">
                <div class="warp">
                    <h3>众邦宝30天</h3>
                    <div class="bz">低风险</div>
                    <div class="list1">
                        <ul>
                            <li>
                                <h3>4.00<span>%</span></h3>
                                <p>满期年化收益率</p>
                            </li>
                            <li>
                                <h3>100</h3>
                                <p>起存资金(元)</p>
                            </li>
                            <li>
                                <h3 class="black">3</h3>
                                <p>产品期限(天)</p>
                            </li>
                        </ul>
                    </div>
                    <div class="list2">
                        <ul>
                            <li>
                                <img src="~assets/img/1.png"/>
                                <p>知名金融机构</p>
                            </li>
                             <li>
                                <img src="~assets/img/4.png"/>
                                <p>精品优质产品</p>
                            </li>
                             <li>
                                <img src="~assets/img/5.png"/>
                                <p>全程专业监管</p>
                            </li>
                        </ul>
                    </div>
                    <p class="c_text">本场品为银行存款，由存款保险基金管理机构提供最高50万息合计保障</p>
                </div>
            </div>
        </div>
        <next></next>
    </div>
</template>
<script>
import Next from './Next.vue'
export default {
    components:{
        Next
    }
}
</script>

<style lang="scss" scoped>
    .cateory-box{
        overflow: hidden;
        background:#F5F5F5;
    }
    .top{
        overflow: hidden;
    }
    .warp{
        margin-left: 58px;
        margin-top: 24px;
    }
    .container{
        width: 940px;
        margin: 29px auto;
        background: #fff;
        .c_text{
            margin: 22px 0 18px;
            color: #333333;
            font-size: 12px;
            font-weight: bold;
        }
        .bz{
            width: 44px;
            height: 16px;
            border: 1px solid #327ED8;
            color: #327ED8;
            font-size: 9px;
            border-radius: 10px;
            line-height: 16px;
            text-align: center;
            margin-top: 14px;
        }
        .list1{
            margin: 44px 0 31px;
            &::after{
                content: '';
                display: block;
                height: 1px;
                width: 525px;
                background: #DDDDDD;
                margin: 31px 0 12px;
            }
            ul{
                overflow: hidden;
                li{
                    float: left;
                    margin-right: 74px;
                    h3{
                        color: #ed6039;
                        font-size: 23px;
                        span{
                            font-size: 12px;
                        }
                    }
                    .black{
                        color: #333333;
                    }
                    p{
                        color: #999999;
                        font-size: 12px;
                        margin-top: 15px;
                    }
                }
            }
        }
        .list2{
            ul{
                overflow: hidden;
                li{
                    float: left;
                    margin-right: 32px;
                    img{
                        float: left;
                        margin-right: 7px;
                    }
                    p{
                        float: left;
                        font-weight: bold;
                        margin-top: 14px;
                        color: #333333;
                        font-size: 10px;
                    }
                }
            }
        }
    }
</style>